<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 56 56"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g clip-path="url(#d62e9__a)"><path fill="#fff" d="M0 0h56v56H0z"/><path fill="#E8ECFF" d="M11 29a18 18 0 1 0 18-18v18H11Z"/><path fill="#0F2369" d="M31.24 12.12c-.267-1.12-.733-1.96-1.4-2.52-.64-.56-1.573-.84-2.8-.84-1.84 0-3.2.747-4.08 2.24-.853 1.467-1.293 3.867-1.32 7.2.64-1.067 1.573-1.893 2.8-2.48 1.227-.613 2.56-.92 4-.92 1.733 0 3.267.373 4.6 1.12 1.333.747 2.373 1.84 3.12 3.28.747 1.413 1.12 3.12 1.12 5.12 0 1.893-.387 3.587-1.16 5.08-.747 1.467-1.853 2.613-3.32 3.44-1.467.827-3.213 1.24-5.24 1.24-2.773 0-4.96-.613-6.56-1.84-1.573-1.227-2.68-2.933-3.32-5.12-.613-2.213-.92-4.933-.92-8.16 0-4.88.84-8.56 2.52-11.04 1.68-2.507 4.333-3.76 7.96-3.76 2.8 0 4.973.76 6.52 2.28 1.547 1.52 2.44 3.413 2.68 5.68h-5.2Zm-4.08 7.28c-1.413 0-2.6.413-3.56 1.24s-1.44 2.027-1.44 3.6.44 2.813 1.32 3.72c.907.907 2.173 1.36 3.8 1.36 1.44 0 2.573-.44 3.4-1.32.853-.88 1.28-2.067 1.28-3.56 0-1.547-.413-2.773-1.24-3.68-.8-.907-1.987-1.36-3.56-1.36Z"/></g><defs><clipPath id="d62e9__a"><path fill="#fff" d="M0 0h56v56H0z"/></clipPath></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Acquaint6 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
